<template>
  <div class="router-panel">
    <div class="box" v-loading="Table_Loading">
      <div class="panel">

        <Form ref="Form" :label="true" :queryInfo.sync="List_QueryInfo" class="table_form"
          @CurrentChange="CurrentChange($event)"></Form>



        <div class="table_top d-flex">
          <div class="left">
            <Dropdown title="新增" type="success is-plain" :data="Insert_ClientCompany" command="item"
              @Command="add($event)"></Dropdown>

            <!-- <el-button type="danger" size="small" :disabled="$IsNull(Submit_List)"
              @click="deleteClientCompany(Submit_List, 'all')" plain>批量删除</el-button> -->


            <!-- <el-button type="success" size="small" @click="export()" plain>导出</el-button> -->
          </div>
          <div class="right">
            <Popover :data="Table_Ranks" :disabled="Table_Ranks_Disabled" :checked="Table_Ranks_Checked"
              :showSummary="Table_Show_Summary_List" :show="Table_Show_Summary" name="child-profession"
              @Checked="Table_Ranks_Checked = $event"></Popover>
          </div>
        </div>
        <Supplier-Table ref="Table" :List_QueryInfo="List_QueryInfo" :Table_List="Table_List"
          :Table_Maxheight="Table_Maxheight" :Submit_List.sync="Submit_List" :Table_Ranks="Table_Ranks"
          :Table_Show_Summary="Table_Show_Summary" :Table_Ranks_Checked="Table_Ranks_Checked"
          @getPage="getPage"></Supplier-Table>
        <el-pagination @size-change="SizeChange" @current-change="CurrentChange" :current-page="List_QueryInfo.page"
          :page-size="List_QueryInfo.limit" :total="Table_List.totalRecords"
          :page-sizes="[10, 20, 50, 100, 150, 500, 1000]"
          layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
      <!-- <Add-Client-Company ref="addClientCompanyDialog" @getPage="getPage('cancel')">
      </Add-Client-Company> -->

      <Upload-Supplier ref="uploadSupplier" @getPage="getPage('cancel')"></Upload-Supplier>
    </div>


  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "supplier",
  dicts: ['sys_yes_no'],
  components: {
    Hint: () =>
      import(/* webpackChunkName: 'components' */ "@/components/table/hint.vue"),
    Popover: () =>
      import(/* webpackChunkName: 'components' */ "@/components/table/popover.vue"),
    Dropdown: () =>
      import(/* webpackChunkName: 'components' */ "@/components/table/dropdown.vue"),
    Form: () =>
      import(/* webpackChunkName: 'profession' */
        "@/views/supplier/supplier-form.vue"),
    "Supplier-Table": () =>
      import(/* webpackChunkName: 'profession' */
        "@/views/supplier/supplier-table.vue"),
    "Upload-Supplier": () =>
      import(/* webpackChunkName: 'profession' */
        "@/views/supplier/upload-supplier.vue"),
  },
  data() {
    var Array = [
      {
        label: "供应商编号",
        prop: "supplierId",
        width: 160,
        fixed: "left",
        checked: true,
      },

      {
        label: "是否支持上门",
        prop: "supplierIsVisitable",
        width: 100,
        checked: true,
      },
      {
        label: "微信/微信名",
        scope: true,
        showOverFlowtooltip: true,
        width: 160,
        checked: true,
      },
      {
        label: "业务数量",
        prop: "supplierNumberBusiness",
        width: 150,
        checked: true,

      },
      {
        label: "供应商业务范畴",
        prop: "supplierBusinessScope",
        width: 160,
        checked: true,

      },
      {
        label: "业务总计金额",
        prop: "supplierBusinessTotalIncome",
        width: 160,
        checked: true,

      },

      {
        label: "收款信息",
        showOverFlowtooltip: true,
        scope: true,
        width: 160,
        checked: true,
      },
      {
        label: "公司名称",
        prop: "supplierCompanyName",
        width: 150,
        checked: true,
      },

      {
        label: "供应商备注",
        prop: "remark",
        width: 200,
        checked: true,
      },
      {
        label: "操作",
        scope: true,
        width: 150,
        minwidth: 150,
        fixed: "right",
        checked: true,
      },
    ];

    var checked = [],
      Disabled = [],
      className = {},
      showSummary = [];
    Array.forEach((item) => {
      if (item.checked) checked.push(item.label);
      if (item.disabled) Disabled.push(item.label);
      if (item.class) className[item.label] = item.class;
      if (item.showSummary) showSummary.push(item.label);
    });

    return {
      // table的最大高度
      Table_Maxheight: 0,
      // 表格的 loading
      Table_Loading: false,
      // 表格的筛选列
      Table_Ranks: Array,
      // 表格当前选中值
      Table_Ranks_Checked: checked,
      // 表格不能被取消选中的值
      Table_Ranks_Disabled: Disabled,
      // 表格的合计行
      Table_Show_Summary: false,
      // 表格的合计行数据
      Table_Show_Summary_List: showSummary,
      // 表格的单元格固定的 className
      Table_Cell_ClassName: className,
      // 业务列表数据
      Table_List: {},
      // 业务列表选中的数据
      Submit_List: [],
      // 商品列表的数据合计
      List_TotalRow: {},
      // 商品列表的数据合计
      List_TotalRow: {},
      // 获取列表的参数对象
      List_QueryInfo: {
        limit: 20,
        page: 1,

        desc: true,
      },
    };
  },
  computed: {
    ...mapState([]),
    // 新增
    Insert_ClientCompany() {
      var arr = [];
      arr.push("信息添加");
      arr.push("导入表格");

      return arr;
    },
  },
  watch: {
    Menu_isCollapse() {
      setTimeout(() => this.setTableMaxHegiht(), 300);
    },
  },
  created() {
    this.dialogOpen();
  },
  mounted() {
    setTimeout(() => this.setTableMaxHegiht());
    $(window).on("resize", () => this.setTableMaxHegiht());
  },
  activated() {
    this.setTableMaxHegiht();
    $(window).on("resize", () => this.setTableMaxHegiht());
    this.getPage("cancel");
  },
  methods: {
    dialogOpen() {
      // setTimeout(() => {

      //   var $form = this.$refs["Form"];
      // });

      this.getPage("scrollTop");
    },

    // 导出
    async export() {
      this.$Util.$emit("setLoading", true);
      const res = await this.$api.exportSpSupplier(
        this.List_QueryInfo,
        this.$Data.ExportHeader
      );
      setTimeout(() => {
        this.$Util.$emit("setLoading", false);
        if (res.status != 200) return this.$Message(null, "导出失败", "error");
        this.$Util.$emit("ExportFileReader", {
          res: res.data,
          type: "xls",
          title: "供应商信息列表",
        });
      }, this.$Data.Submit_Time);
    },



    // 添加
    add(val) {
      if (val === "信息添加")
        this.$RouterPush('add-edit-supplier', {
          type: 'add'
        })
      else if (val === "导入表格")
        this.$refs["uploadSupplier"].Dialog = true;
    },
    // 设置表格的最大高度
    setTableMaxHegiht() {
      this.$Util.$emit("setTableMaxHeight");
      var arr = [".table_form", ".table_top", ".el-pagination"];
      var height =
        $(window).height() -
        this.$getGroupHeight(arr) -
        this.$Data.Table_maxHeight;
      this.Table_Maxheight = height;
    },
    // 获取供应商
    async getPage(str) {

      if (str != "cancel") this.Table_Loading = true;
      const { data: res } = await this.$api.getSpSupplierPage(
        this.List_QueryInfo
      );
      setTimeout(() => {
        this.Table_Loading = false;
        if (res.code != 0) return;
        this.Table_List = res;
        if (!this.$IsNull(res.totalRow))
          this.List_TotalRow = res.totalRow;
        if (this.$IsNull(res.datas))
          return (this.Table_List.datas = []);

        this.setTableMaxHegiht();
        this.tableDoLayout();
      }, str != "cancel" ? this.$Data.Table_Loading_Time : 0);
    },
    // 表格格式重置
    tableDoLayout() {
      this.$refs.Table.tableDoLayout();
    },
    // 表格行设置一个固定的className
    RowClassName({ row, rowIndex }) {
      var newArr = [];
      if (row.colorName) newArr.push(row.colorName);
      if (row.is_Checked) newArr.push("is_Checked");
      return newArr.splice(" ");
    },
    // 单元格设置一个固定的className
    CellClassName({ row, column, rowIndex, columnIndex }) {
      if (this.$IsNull(this.Table_Cell_ClassName[column.label])) return "";
      else return this.Table_Cell_ClassName[column.label];
    },

    // 每页页数改变
    SizeChange(size) {
      this.List_QueryInfo.limit = size;
      this.getPage();
    },
    // 页码改变
    CurrentChange(current) {
      this.List_QueryInfo.page = current;
      this.getPage("scrollTop");
    },
    // 批量修改
    async editProfession(row) { },
    // 重置
    Reset() {
      var newArr = [
        "Table_List",
        "Submit_List",
        "List_TotalRow",
        "List_TotalRow",
        "List_QueryInfo",
      ];
      newArr.forEach((item) => {
        this[item] = this.$options.data()[item];
      });
      this.resetFields();
    },
    // 重置表单
    resetFields() {
      this.$refs["Form"].resetFields();
    },
  },

  destroyed() {
    $(window).off();
  },
  deactivated() {
    $(window).off();
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/Box.scss";
@import "@/assets/css/profession/profession/child-profession.scss";
</style>
